<template>
	<view class="shop pb-100">
		<view :style="{ paddingTop: statusBarHeight*2+10 + 'rpx' }" class="top-box ph-24 pv-14 f ai-c jc-s-b">
			<view class="f f1">
				<view class="search w-f" @click="searchTap">
					<u-search placeholder="快速查找戳我" v-model="keyword" height="30" bgColor="#FFFFFF" searchIconColor="#999"
						placeholderColor="#999" clearabled :showAction="false" disabled>
					</u-search>
					<view class="w-100 search-btn"><u-button text="搜索" color="#FABB3C" shape="circle"
							@click.stop="toSearch"></u-button></view>
				</view>
			</view>
			<view class="w-40 h-40 ml-18 cart" @click="toCart">
				<image src="http://cwht.ricecs.cn/app/shop/cart.png" class="w-40 h-40"></image>
				<view class=" h-30 b-30 f ai-c jc-c" style="color:#fff;font-size: 24rpx;min-width: 30rpx;" v-if="cartNum>0">{{cartNum>99?'99+':cartNum}}</view>
			</view>
		</view>
		<view class="f pt-10 tab w-f" :class="type === 1 ? 'tab1' : 'tab2'">
			<view class="tab-box f fd-c ai-c" >
				<view class="w-110 h-100" style="z-index: 999;">
					<image src="http://cwht.ricecs.cn/app/shop/mao.png" class="w-110 h-100" v-show="type === 1"></image>
				</view>
				<view class="tab-content h-96 f ai-c jc-c fd-c w-f" :class="type === 1 ? 'active' : ''" @click="changeType(1)"
					style="margin-top: -20rpx;">
					<view class="f ai-c">
						<image
							:src="type === 1 ? 'http://cwht.ricecs.cn/app/shop/cat.png' : 'http://cwht.ricecs.cn/app/shop/cat-select.png'"
							class="w-36 h-32"></image>
						<view class="fs-28 text-color5 ml-14 text">喵星人</view>
					</view>
					<view class="w-48 h-6 b-6 mt-12 heng"></view>
				</view>
			</view>
			<view class="tab-box f fd-c ai-c">
				<view class="w-110 h-100" style="z-index: 999;">
					<image src="http://cwht.ricecs.cn/app/shop/gou.png" class="w-110 h-100" v-show="type === 0"></image>
				</view>
				<view class="tab-content h-96 f ai-c jc-c fd-c w-f" :class="type === 0 ? 'active' : ''" @click="changeType(0)"
					style="margin-top: -20rpx;">
					<view class="f ai-c">
						<image
							:src="type === 0 ? 'http://cwht.ricecs.cn/app/shop/dog.png' : 'http://cwht.ricecs.cn/app/shop/dog-select.png'"
							class="w-36 h-32"></image>
						<view class="fs-28 text-color5 ml-14 text">汪星人</view>
					</view>
					<view class="w-48 h-6 b-6 mt-12 heng"></view>
				</view>
			</view>
		</view>
		<Menu :petType="type" ref="menuRef" />
		<Active ref="activeRef" />
		<Recommend ref="recommendRef" />
		<!-- tab -->
		<!-- <Tabbar tab="2" /> -->
	</view>
</template>
<script setup lang="ts">
	import { ref } from 'vue';
	import { onLoad, onShow } from '@dcloudio/uni-app';
	import { promotionBannerList, bannerList } from '@/services/api/banner';
	import { categoryTopList, categoryFirstList, spuPage, seckillActivityGetNow, combinationActivityPage, bargainActivityPage, getCount } from '@/services/api/shop/index';
	import { userIsNew } from '@/services/api/auth';

	import Menu from './Menu.vue';
	import Active from './Active.vue';
	import Recommend from '@/components/recommend/index.vue';
	import { useAuthStore } from '@/store/modules/auth';
	const authStore = useAuthStore();
	const systemInfo = uni.getSystemInfoSync();
	const statusBarHeight = systemInfo.statusBarHeight;
	const type = ref(1);
	const menuRef = ref();
	const activeRef = ref();
	const recommendRef = ref();
	const cartNum = ref(0)
	const firstList = ref<any[]>([]);
	onShow(() => {
		uni.setNavigationBarColor({
			frontColor: '#ffffff',
			backgroundColor: '#ffffff',
		});

		getCategoryTopList();
		getBanner();
		getSpuPage();
		getNumber()
	});

	//获取数量
	async function getNumber() {
		const res = await getCount()
		cartNum.value = Number(res.data)
	}

	//获取banner
	async function getBanner() {
		const bannerData = await bannerList({ positionName: '商城' });

		menuRef.value.getBanner(bannerData.data);
	}
	//获取顶级分类
	async function getCategoryTopList() {

		const { data } = await categoryTopList({ type: 0, spuType: 0, relatedPetType: type.value });
		console.log(data)
		menuRef.value.getData(data, type.value);
	}

	//获取商品
	async function getSpuPage() {
		//新用户/老用户
		const loginType = await authStore.isLogin();
		if (loginType == true) {
			userIsNew(authStore.getUserId).then((isNew : any) => {
				if (isNew.data) {
					spuPage({ pageNo: 1, pageSize: 10, type: 2, sortAsc: true }).then((res : any) => {
						activeRef.value.getZoneList(res.data.list, isNew.data);
					});
				} else {
					spuPage({ pageNo: 1, pageSize: 10, type: 3, sortAsc: true }).then((res : any) => {
						activeRef.value.getZoneList(res.data.list, isNew.data);
					});
				}
			});
		} else {
			spuPage({ pageNo: 1, pageSize: 10, type: 2, sortAsc: true }).then((res : any) => {
				activeRef.value.getZoneList(res.data.list, true);
			});
		}

		//秒杀
		seckillActivityGetNow({ pageNo: 1, pageSize: 10, type: 2, sortAsc: true }).then((res : any) => {
			activeRef.value.getSeckillList(res.data.activities);
		});
		//拼团
		combinationActivityPage({ pageNo: 1, pageSize: 10, type: 5, sortAsc: true }).then((res : any) => {
			activeRef.value.getTeamworkList(res.data.list);
		});
		//砍价
		bargainActivityPage({ pageNo: 1, pageSize: 10, type: 6, sortAsc: true }).then((res : any) => {
			activeRef.value.getBargainList(res.data.list);
		});
	}
	function searchTap() {
		uni.navigateTo({
			url: '/pages_index/search',
		});
	}
	function toCart() {
		uni.navigateTo({
			url: '/pages_shop/shopCart/index',
		});
	}
	const changeType = (data : number) => {
		type.value = data;
		getCategoryTopList();
	};
</script>
<style lang="scss" scoped>
	.shop {
		background: #f5f5f5;
		min-height: 100vh;
		.tab1{
			background-image: url('http://cwht.ricecs.cn/app/shop/maoTab.png');
			background-position: bottom;
			background-repeat: no-repeat;
			background-size: 100%;
		}
		.tab2{
			background-image: url('http://cwht.ricecs.cn/app/shop/gouTab.png');
			background-position: bottom;
			background-repeat: no-repeat;
			background-size: 100%;
		}
		.tab {
			background-color: #fabb3c;
			

			.tab-box {
				width: 50%;

				.tab-content {
					background: rgba(255, 255, 255, 0.3);
					border-radius: 32rpx 32rpx 0 0;
				}

				.active {
					//background: #fff !important;
					
					.text {
						color: #fabb3c !important;
					}

					.heng {
						background: #fabb3c;
					}
				}
			}
		}

		.top-box {
			background: #fabb3c;
			padding-right: 28vw
		}

		.cart {
			position: relative;

			view {
				background: #f54040;
				position: absolute;
				right: -10rpx;
				top: -10rpx;
			}
		}

		.search {
			position: relative;
			background: #fff;
			border-radius: 64rpx;
			padding-right: 10rpx;
			display: flex;
			align-items: center;

			::v-deep .u-button__text {
				font-size: 22rpx !important;
				font-weight: 400 !important;
			}

			::v-deep .u-button {
				height: 48rpx !important;
			}
		}
	}
</style>